Adaptive Layout

Posts tagged with Adaptive Layout

Three stacked warm off-white list tiles connect through a glowing violet divider to a larger detail pane, with teal selection markers and small coral accents on deep navy.

Build a List-Detail Layout with Compose Adaptive APIs

Build an adaptive Compose list-detail layout with Navigation 3 scenes, Material 3 Adaptive pane metadata, back-stack-driven selection, placeholders, and pane-aware testing.

Two floating warm off-white planes are separated by a glowing violet horizontal hinge gap, with a teal sphere above and a small coral puck below on deep navy.

Foldable Device Posture and Hinge-Aware Compose Layouts

Build hinge-aware Jetpack Compose layouts that handle tabletop and book-like postures, separating and occluding folds, state continuity, and adaptive fallbacks for every window.

A warm off-white content plane transitions into two connected panes around a glowing violet fold, with teal and coral accents on deep navy.

Adaptive Layouts for Phones, Tablets, and Foldables

Design Compose layouts around available window space, using responsive components and adaptive content structures that remain useful on phones, tablets, foldables, and resizable windows.

Five progressively wider warm off-white panels cross a glowing violet threshold with a teal indicator and a small coral marker on deep navy.

Window Size Classes in Jetpack Compose

Use Jetpack Compose window size classes to make high-level layout decisions from the current app window, including compact through extra-large widths, height constraints, current APIs, and breakpoint testing.

A teal bottom navigation bar transforms into a violet side rail around a central warm off-white content panel.

Adaptive NavigationSuiteScaffold for Phone and Tablet

Use NavigationSuiteScaffold in Jetpack Compose to present the same top-level destinations as a bottom bar on compact windows and a navigation rail on wider windows.